<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="description"
      content="汇融名企是面向全国商家服务的大型互联网平台，为商家提供流量扶持，引导品牌曝光；为消费者提供风云榜单，招商加盟，引导实现消费，达成合作，上汇融名企实现共赢。"
    />
    <title>榜单详情-汇融名企</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/rankingDetail.css" />
  </head>
  <body>
    <!-- <div id="header-page"></div> -->
    <!--#include virtual="/header.html" -->
    <div class="content">
      <div class="rank-title">
        <div class="title-text need-text-overflow" id="name"></div>
        <div
          class="ranking-detail-title need-text-overflow"
          id="ranking-detail-title"
        ></div>
      </div>
    </div>
    <div class="ranking-shop-wrapper wrapper">
      <div class="ranking-top" id="ranking-top"></div>
      <div class="ranking-bottom" id="ranking-bottom"></div>
      <div id="page" class="page_div"></div>
    </div>
    <!--#include virtual="/footer.html" -->
    <!-- <div id="footer-page"></div> -->
    <div class="get-reward">
      <img
        class="rank-close"
        id="rank-close"
        src="./image/icon/index_gban_icon.png"
      />
      <img id="rank-close-img" src="./image/picture/index_jpsq_icon.png" />
    </div>
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.my-message.1.1.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/paging.js"></script>
    <script type="text/javascript">
      $(function () {
        // $('#header-page').load('header.html')
        // $('#footer-page').load('footer.html')
        var windowWidth = $('body').width()
        showGetreward = true
        if (windowWidth > 1887) {
          var rate = windowWidth / 1920
          var top = rate * 123
          $('.rank-title .ranking-detail-title').css('padding-top', top)
          $('.rank-title').css('height', (1139 / 1920) * windowWidth + 'px')
          window.onresize = function () {
            var windowWidth = $('body').width()
            var rate = windowWidth / 1920
            var top = rate * 123
            $('.rank-title .ranking-detail-title').css('padding-top', top)
            $('.rank-title').css('height', (1139 / 1920) * windowWidth + 'px')
          }
        }
        $(window).scroll(function () {
          //变量scrollTop是滚动条滚动时，距离顶部的距离
          var scrollTop =
            document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop > 840 && showGetreward) {
            $('.get-reward').show()
          } else {
            $('.get-reward').hide()
          }
        })
        var params = {
          list_id: window.location.href.split('list_id=')[1],
        }
        var api = new ajax('GET', '/api/home/rankingGet', params)
        api.then(function (res) {
          if (JSON.parse(res).code === 1001) {
            go('404.html')
          } else {
            init(JSON.parse(res).data)
          }
        })
      })
      function init(data) {
        var contentTitle = data.rankingInfo.title
        $('#ranking-detail-title')
          .text(contentTitle)
          .attr('title', contentTitle)
        document.title = contentTitle + '-汇融名企'
        initRankingItem(data.shop, data.rankingInfo.ind_name)
        $('#rank-close-img').click(function () {
          go('getReward.html')
        })
        $('#rank-close').click(function () {
          showGetreward = false
          $('.get-reward').hide()
        })
        // $('#page').paging({
        //   pageNo: data.page,
        //   totalPage: data.page_num,
        //   totalSize: data.total,
        //   callback: function(num) {
        //     changePage(num)
        //   }
        // })
        $('.go').click(function (e) {
          var splited = e.currentTarget.id.split('-')
          var type = splited[0]
          var id = splited[1]
          if (type === 'ranking') {
            go('rankingShopDetail.html?id=' + id)
          } else if ((type = 'shop')) {
            go('rankingShopDetail.html?shop_id=' + id)
          }
        })
      }
      function initRankingItem(data, type) {
        var top = ''
        var bottom = ''
        var page = getURLParams().page
        for (key in data) {
          var currendData = data[key]
          if (+key + 1 < 4 && (!page || page == 1)) {
            top += [
              '<div',
              '            class="ranking-top-item"',
              '            id="ranking-0"',
              '            style="background: url(\'./image/picture/ranking_detail_item_' +
                (+key + 1) +
                ".png');margin-right:18px; float: " +
                (+key === 1 ? 'left' : 'none') +
                '">',
              '            <div class="rank-box-top">',
              '              <img src="./image/picture/index_meals_img_' +
                (+key + 1) +
                '.png"',
              '                class="meals-img"',
              '              />',
              '              <div class="rank-category">',
              '                <span>',
              '                  所属分类',
              '                </span>',
              '                <p>' + type + '</p>',
              '              </div>',
              '              <div class="ranking-top-item-title">',
              '                <div class="ranking-title-top need-text-overflow"><span>' +
                currendData.title +
                '</span></div>',
              '<div class="ranking-top-img">',
              '                <img src="' +
                (currendData.images.indexOf('http') > -1
                  ? currendData.images
                  : URL + currendData.images) +
                '" />',
              '</div>',
              '              </div>',
              '            </div>',
              '            <div class="ranking-top-item-desc"><span>' +
                (currendData.content
                  ? currendData.content
                  : currendData.title) +
                '            </span></div>',
              '          </div>',
            ].join('')
          } else if (+key + 1 < 11) {
            bottom += [
              '<div class="ranking-item">',
              '            <div class="ranking-item-rank">',
              '              <span>' +
                (+key + 1 < 10 ? '0' + (+key + 1) : +key + 1) +
                '</span>',
              '            </div>',
              '            <div class="ranking-item-inner">',
              '              <div class="ranking-item-img">',
              '                <img src=" ' +
                (currendData.images.indexOf('http') > -1
                  ? currendData.images
                  : URL + currendData.images) +
                ' " alt="" />',
              '              </div>',
              '              <div class="ranking-item-detail">',
              '                <div class="ranking-item-title ranking-title">',
              '                  <h1 class="need-text-overflow"><span>' +
                currendData.title +
                '</span></h1>',
              '                  <div class="rank-category">',
              '                    <span>',
              '                      所属分类',
              '                    </span>',
              '                    <p>' + type + '</p>',
              '                  </div>',
              '                </div>',
              '                <div class="ranking-item-bottom">',
              '                  <div class="ranking-item-desc"><span>' +
                (currendData.content
                  ? currendData.content
                  : currendData.title) +
                '                  </span></div>',
              '                </div>',
              '              </div>',
              '            </div>',
              '          </div>',
            ].join('')
          }
        }
        $('#ranking-top').append(top)
        $('#ranking-bottom').append(bottom)
        // MultiTextOverflow($('.ranking-title-top'))
        MultiTextOverflow($('.ranking-top-item-desc'))
        // MultiTextOverflow($('.ranking-title h1'))
        MultiTextOverflow($('.ranking-item-desc'))
        $('.ranking-item').hover(
          function () {
            $(this).css('border', 'solid 3px #E54F42')
            $(this).find('.ranking-title h1').css('color', '#E54F42')
            $(this).find('.rank-category p').css('color', '#E54F42')
          },
          function () {
            $(this).css('border', 'solid 3px transparent')
            $(this).find('.ranking-title h1').css('color', '#333333')
            $(this).find('.rank-category p').css('color', '#DBA44D')
          }
        )
      }
    </script>
  </body>
</html>
